<template>
    <div class="good-info">
        <template v-if="goodInfo">
            <!-- 商品轮播图 -->
            <Banner :images="images" v-if="images" :height="'400px'" />
            <!-- 商品信息 -->
            <div class="good-middle" v-if="images">
                <p class="good-title">{{goodInfo.gname}}</p>
                <p class="good-price">￥ {{goodInfo.price}}</p>
                <p class="good-desc">{{goodInfo.gdesc}}</p>
            </div>
            <!-- 优惠券 -->
            <div class="good-coupon">
                <span>优惠</span>
                <div>
                    <p>
                        <van-tag color="red" plain>优惠券</van-tag>满197.00减40.00
                    </p>
                    <p>
                        <van-tag color="red" plain>优惠券</van-tag>满197.00减40.00
                    </p>
                    <van-button type="danger" size="mini">去领券</van-button>
                </div>
            </div>
        </template>
        <van-skeleton title :row="15" v-else />
    </div>
</template>

<script>
import Banner from "../../components/Banner";
import axios from "axios";
import { mapState } from "vuex";
export default {
    name: "",
    data() {
        return {
            images: null
        };
    },
    props: {},
    methods: {
        good() {
            if (this.goodInfo) {
                let img = this.goodInfo.detail.concat();
                this.images = img.splice(0, 5);
            }
        }
    },
    components: { Banner },
    mounted() {
        this.good();
    },
    computed: mapState("detail", ["goodInfo"]),
    watch: {
        goodInfo: {
            handler(n, o) {
                this.good();
            }
        }
    }
};
</script>

<style scoped>
div,
p {
    margin: 0;
}
.good-info{
    margin-bottom: 50px;
}
.good-middle {
    background: #fff;
    font-size: 14px;
    color: rgb(81, 81, 81);
    margin-bottom: 10px;
    padding: 10px;
}
.good-middle p {
    padding-bottom: 5px;
    margin: 0;
}
.good-middle .good-price {
    font-weight: bold;
    color: red;
    font-size: 18px;
}
.good-coupon {
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 10px;
    background: #fff;
    margin-bottom: 10px;
}
.good-coupon p {
    padding-bottom: 5px;
}
.good-coupon > span {
    margin: 0 10px;
    color: rgb(125, 124, 123);
}
</style>
